1. create child pages

                ng generate component pages/general/contact/mailing --module=app
                ng generate component pages/general/contact/mapping --module=app
                ng generate component pages/general/contact/website --module=app

                

2. import the child components

                import { ContactComponent } from './pages/general/contact/contact.component';
                import { MailingComponent } from './pages/general/contact/mailing/mailing.component';
                import { MappingComponent } from './pages/general/contact/mapping/mapping.component';
                import { WebsiteComponent } from './pages/general/contact/website/website.component';

                

3. add routes

                    const routes: Routes = [
                        { path: '', component: HomeComponent, },

                        { path: 'about', component: AboutComponent },
                        { path: 'login', component: LoginComponent },
                        { path: 'signup', component: SignupComponent },

                        {
                          path: 'contact', component: ContactComponent,
                          children: [
                            { path: '', component: MailingComponent },
                            { path: 'mailing', component: MailingComponent },
                            { path: 'mapping', component: MappingComponent },
                            { path: 'website', component: WebsiteComponent },
                          ],
                        },

                        { path: '**', component: NotFoundComponent }

                      ];

                      

Complete code

                      import { NgModule } from '@angular/core';
                      import { Routes, RouterModule } from '@angular/router';

                      import { HomeComponent } from './pages/general/home/home.component';
                      import { NotFoundComponent } from './pages/general/not-found/not-found.component';

                      import { AboutComponent } from './pages/general/about/about.component';
                      import { LoginComponent } from './pages/general/login/login.component';
                      import { SignupComponent } from './pages/general/signup/signup.component';

                      import { ContactComponent } from './pages/general/contact/contact.component';
                      import { MailingComponent } from './pages/general/contact/mailing/mailing.component';
                      import { MappingComponent } from './pages/general/contact/mapping/mapping.component';
                      import { WebsiteComponent } from './pages/general/contact/website/website.component';

                      const routes: Routes = [
                        { path: '', component: HomeComponent, },

                        { path: 'about', component: AboutComponent },
                        { path: 'login', component: LoginComponent },
                        { path: 'signup', component: SignupComponent },

                        {
                          path: 'contact', component: ContactComponent,
                          children: [
                            { path: '', component: MailingComponent },
                            { path: 'mailing', component: MailingComponent },
                            { path: 'mapping', component: MappingComponent },
                            { path: 'website', component: WebsiteComponent },
                          ],
                        },

                        { path: '**', component: NotFoundComponent }

                      ];

                      @NgModule({
                        imports: [RouterModule.forRoot(routes)],
                        exports: [RouterModule],
                        declarations: []
                      })
                      export class AppRoutingModule { }

                      

5. HTML view

                      <div>
                          <p>contact works!</p>
                          <ul>
                            <li><a routerLink="/contact/mailing">Mailing</a></li>
                            <li><a routerLink="/contact/mapping">Mapping</a></li>
                            <li><a routerLink="/contact/website">Website</a></li>
                          </ul>
                          <h4>Child Routes Result</h4>
                          <router-outlet></router-outlet>
                        </div>

                    

1. routerLink in ahref
2. router-outlet